<template>
	<div class="playView">
		<div class="bg" :style="bgIMg"></div>
		<div class="closeBtn" @click="close"><i class="fh iconfont icon-fanhuijian"></i></div>
		<div class="disc-box">
			<div class="disc-need">
				<img src="../assets/needle-ip6.png" alt="">
			</div>
			<div class="disc-hj">
				<img src="../assets/disc-ip6.png" alt="">
				<div class="songImg"  :class="playerState=='playing'?'activeAnim':''">
					<img :src="nowSong.al.picUrl" alt="">
				</div>
			</div>
		</div>
		<div class="lyricBox">
			<marquee  scrolldelay="-50" behavior="" direction="up"
			onmouseover=this.stop() onmouseout=this.start() >
				<div class="lyric-item" v-for="(item,index) in playLrc" :key="index">
					<p>{{item.its}}</p>
				</div>
			</marquee>
		</div>
		<div class="conctorBtn">
			<!-- 歌曲播放控制按钮 -->
			<!-- 上一首 -->
			<i @click.stop="changeSong('pre')" class="iconfont icon-pre-chapter"></i>
			<!-- 播放/暂停 -->
			<i class="iconfont" @click.stop="changeState" :class="playerState=='playing'?'icon-zanting':'icon-start'"></i>
			<!-- 下一首 -->
			<i @click.stop="changeSong('next')" class="iconfont icon-next-chapter"></i>
		</div>
		<vProgress></vProgress>
	</div>
</template>

<script>
	import vProgress from "./vProgress.vue"
	// import api from "../js/api"
	export default{
		components:{
			vProgress
		},
		data(){
			return{
				// 歌单背景图
				bgIMg:"",
				// 歌词
				lyricArr:[],
			}
		},
		computed:{
			nowSong(){
				return this.$store.state.musicData;
			},
			playerState(){
				return this.$store.state.playerData;
			},
			playLrc(){
				return this.$store.state.Mp3Lrc;
			}
		},
		created() {
			this.bgIMg = "background-image: url("+this.nowSong.al.picUrl+");"
		},
		updated() {
			this.bgIMg = "background-image: url("+this.nowSong.al.picUrl+");"
			// window.console.log(this.bgIMg);
			// window.console.log(this.nowSong.id);
		},
		mounted() {
			// window.console.log(this.nowSong);
			this.audio.addEventListener("ended",()=>{
				window.console.log('播放结束,播放下一首')
				this.changeSong('nextSong');
			})
		},
		methods:{
			close(){
				this.$emit("closeView")
			},
			changeState(){
				if(this.playerState == "playing"){ 
					this.audio.pause();
					// let needle = document.querySelector(".disc-need img")
					// window.console.log(needle)
					// let disc = document.querySelector(".disc-hj img")
					// window.console.log(disc)
					// disc.classList.add("activeAnim");
				}else{
					this.audio.play();
					// this.disc.classList.remove("activeAnim");
				}
			},
			changeSong(type){
				this.$emit("changeSong",type)
			},
		}
	}
</script>

<style lang="scss">
@keyframes circling{

	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(1turn);
	}
}
	.activeAnim{
		animation-name: circling;
		animation-duration: 20s;
		animation-timing-function: linear;
		animation-delay: 0s;
		animation-iteration-count: infinite;
		animation-direction: normal;
		animation-fill-mode: none;
		animation-play-state: running;
	}
	.playView{
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: pink;
		transition: all 0.5s;
		z-index: 100;
		overflow: hidden;
		.bg{
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			z-index: -1;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: 50%;
			filter: blur(10px);
			transform: scale(1.5);
			&::after {
				content: " ";
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0,0,0,.25);
			}
		}
		.closeBtn{
			position: absolute;
			top: 20px;
			left: 20px;
		}
		.disc-box{
			.disc-need{
				position: absolute;
				top: 0;
				left: 18%;
				z-index: 1;
				img{
					width: 30%;
				}
			}
			.disc-hj{
				position: absolute;
				top: 60px;
				left: 0;
				img{
					width: 80%;
				}
				.songImg{
						width: 192px;
						height: 192px;
						position: absolute;
						top: 54px;
						left: 92px;
						z-index: -1;
						overflow: hidden;
						border-radius: 50%;
					img{
						width: 100%;
					}
				}
			}
		}
		.lyricBox{
			width: 100%;
			height: 132px;
			text-align: center;
			position: absolute;
			top: 58%;
			left: 50%;
			transform: translateX(-50%);
			color: white;
			overflow: scroll;
			marquee{
				width:100%;
				height: 100%;
				text-align: center;
				p{
					margin-bottom: 2px;
				}
			}
		}
		.conctorBtn{
			width: 100%;
			position: fixed;
			bottom: 6%;
			i{
				font-size: 45px;
				margin: 0 5px;
				color: rgba(255,255,255,0.8);
			}
		}
	}
</style>
